<template>
  <div class="k2">
    <h3><dv-decoration-7>两学期班级平均绩点</dv-decoration-7></h3>
    <dv-border-box-10 :color="['#50649a', '#50649b']">
      <div ref="myChart1" id="sexDiv"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      // 各班级x（横）轴数据
      xzhou: ["(1)班", "(2)班", "(3)班"],
      //各班级平均绩点y（纵）轴数据
      yzhou: [],
      majorInfo: [], //订阅的消息
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectMajorInfo", (msgName, data) => {
      // console.log("班级平均绩点", data);
      this.majorInfo = data;
      this.getInfo();
    });
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/list/${this.majorInfo.year}/${this.majorInfo.college}/${this.majorInfo.major}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("平均绩点,", response);
        this.yzhou = response.data.data;
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      // 1.初始化
      const myChart1 = echarts.init(this.$refs.myChart1, zhuti);
      // 2.设置图表数据
      // x轴数据配置
      const xDate = this.xzhou;
      //  y周数据配置
      const yData = this.yzhou;
      //3.设置配置项
      const option = {
        // title: {
        //   text: "各班级平均绩点",
        // },
        grid: {
          top: "20%",
          bottom: "12%",
          left: "7%",
          right: "7%",
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: { show: false },
        },
        xAxis: {
          data: xDate,
          type: "category",
          // splitLine: { show: false },
          // axisLine: { show: false },
        },
        // 图例设置
        legend: {
          data: ["上学期平均绩点", "总平均绩点"],
          right: "20px",
          top: "10px",
        },
        series: [
          {
            name: "上学期平均绩点",
            type: "bar",
            data: yData,
            barWidth: "35%",
            markPoint: {
              data: [
                //标注的数据数组，每一项都是一个对象
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
          {
            name: "总平均绩点",
            type: "bar",
            data: yData,
            barWidth: "35%",
            markPoint: {
              data: [
                //标注的数据数组，每一项都是一个对象
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };

      //4.设置图表绘制图表
      myChart1.setOption(option);
      // 监听窗口resize事件，调用图表resize方法
      // window.addEventListener("resize", () => {
      //   myChart1.resize();
      // });
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart1.resize();
      });
    },
  },
  created() {},
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
}
h3 {
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  margin-bottom: 10px;
  color: aqua;
  /* padding-left: 17px; */
}
#sexDiv {
  flex: 9;
  width: 100%;
  height: 100%;

  /* border-radius: 15px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
</style>
